<template>
<div class="register">
    <el-container>
        <el-header class="header">
            <div>
                2024年3月任务分解表
            </div>
        </el-header>
        <el-main>
            <el-table :data="data.dayReportList" style="width: 100%">
                <el-table-column prop="当天日期" label="日期" min-width="50">
                </el-table-column>
                <el-table-column>
                    <template slot="header">
                        <div>采浆量</div>
                        <div>任务数</div> 
                    </template>
                    <el-table-column prop="当日采浆量" label="当日采浆量">
                    </el-table-column>
                </el-table-column>
                <el-table-column v-bind:label="'' + data.采浆量">
                    <el-table-column prop="本月采浆量" label="已完成袋数">
                    </el-table-column>
                </el-table-column>
                <el-table-column>
                    <template slot="header">
                        <div>新献血浆者</div>
                        <div>任务数</div> 
                    </template>
                    <el-table-column label="未完成袋数">
                        <template slot-scope="scope">
                            {{ indicators.采浆量 - scope.row.本月采浆量 }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column v-bind:label="'' + data.新浆员发展数">
                    <el-table-column>
                        <template slot="header">
                            <div>本月建档</div>
                            <div>当日献浆数</div> 
                        </template>
                        <template slot-scope="scope">
                            {{ scope.row.本月建档当日献浆数}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="采浆量85%">
                    <el-table-column prop="本月建档并献浆数" label="已完成新浆员">
                    </el-table-column>
                </el-table-column>
                <el-table-column v-bind:label="'' + Math.ceil(data.采浆量*0.85)">
                    <el-table-column label="未完成新浆员">
                        <template slot-scope="scope">
                            {{ indicators.新浆员发展数 - scope.row.本月建档并献浆数 }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="新献血浆者85%">
                    <el-table-column prop="剩余天数" label="剩余天数">
                    </el-table-column>
                </el-table-column>
                <el-table-column v-bind:label="'' + Math.ceil(data.新浆员发展数*0.85)">
                    <el-table-column label="日均袋数">
                        <template slot-scope="scope">
                            {{ Math.ceil((indicators.采浆量 - scope.row.本月采浆量)/ scope.row.剩余天数 )}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="目标留存率">
                    <el-table-column label="当前留存率">
                        <el-table-column label="日均新人数">
                            <template slot-scope="scope">
                                {{ Math.ceil((indicators.新浆员发展数 - scope.row.本月建档并献浆数)/ scope.row.剩余天数 )}}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column v-bind:label="'' + data.目标留存率">
                  <el-table-column v-bind:label="'' + data.留存率">
                        <el-table-column label="日均袋数">
                            <template slot="header">
                                <div>日均袋数</div>
                                <div>85%</div> 
                            </template>
                            <template slot-scope="scope">
                                {{ Math.ceil((indicators.采浆量*0.85 - scope.row.本月采浆量)/ scope.row.剩余天数 )}}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="目标频次">
                    <el-table-column label="当前频次">
                        <el-table-column prop="count" label="日均新人数85%">
                            <template slot="header">
                                <div>日均新人数</div>
                                <div>85%</div> 
                            </template>
                            <template slot-scope="scope">
                                {{ Math.ceil((indicators.新浆员发展数*0.85 - scope.row.本月建档并献浆数)/ scope.row.剩余天数 )}}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column v-bind:label="'' + data.目标频次">
                  <el-table-column v-bind:label="'' + data.总频次">
                        <el-table-column prop="" label="">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</div>
</template>

<script>
import {
    plasmaReport
} from "@/api/plasma";
import Vue from 'vue';
Vue.prototype.indicators = undefined;

export default {
    name: "plasmaReport",
    data() {
        return {
            data: {
                dayReportList: [],
                "新浆员采浆袋数": undefined,
                "当年献浆袋数": undefined,
                "总频次": undefined,
                "当年发展新浆员数": undefined,
                "上年参与献浆总人数": undefined,
                "新浆员一针率": undefined,
                "留存率": undefined,
                "当年献浆总人数": undefined
            }
        }
    },
    created() {
        this.getPlasmaReport()
    },
    methods: {
        getPlasmaReport() {
            plasmaReport().then(res => {
                this.data = res.data
                Vue.prototype.indicators = res.data
                console.log(res)

            });
        }
    }
};
</script>

<style lang="scss">
.register {
    .cell {text-align: center;}
    .header {
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    
    justify-content: center;
    align-items: center;
    height: 100%;
    /*background-image: url("../assets/images/login-background.jpg");*/
    background-size: cover;
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.register-code-img {
    height: 38px;
}
</style>
